<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="./css/move.css" media="screen and (min-width:0px) and (max-width:600px)">
    <link rel="stylesheet" href="./css/pc.css" media="screen and (min-width:601px) and (max-width:1920px)">
    <title>响应式demo</title>
</head>
<body>
    <div class="box">
        <header></header>
        <menu>
            <sort></sort>
            <sort></sort>
            <sort></sort>
            <sort></sort>
            <sort></sort>
            <sort></sort>
        </menu>
        <content>
            <picture></picture>
            <picture></picture>
            <picture></picture>
            <picture></picture>
            <picture></picture>
            <picture></picture>
            <picture></picture>
            <picture></picture>
        </content>
    </div>
</body>
<script>
    function adapt(){
        const content = document.querySelector('content');
        const cwidth = document.documentElement.clientWidth;
        if(content.childElementCount % 3 === 2&&cwidth<=600){
            const pic = document.createElement('filler');
            content.appendChild(pic);
        }
    }
    window.addEventListener('load',adapt);
</script>
</html>